<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <% 
    String path = request.getContextPath();
     %>
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="<%=path %>/css/semantic.min.css">
    <link rel="stylesheet" href="<%=path %>/css/index.css">
 <script type="text/javascript" src="<%= path %>/js/modernizr.custom.js"></script>
   
    <script src="<%=path %>/js/jquery-3.6.0.min.js" type="text/javascript"></script>
</head>
<body>

	







<!--导航-->
<nav class="ui inverted segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">航天英雄</h2>
            <a href="hero.html" class=" m-item item m-mobile-hide"><i class="home icon"></i>航天人物</a>
            <a href="index.html" class="m-item item m-mobile-hide"><i class="clone icon"></i>首页</a>
           
        </div>
    </div>

    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>

</nav>
<!--中间-->

<div class="m-container m-padded-tb-big">
    <div class="ui container">
        <!--header-->
        <div class="ui top attached segment">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h3 class="ui teal header">分类</h3>
                </div>
                <div class="right aligned column">
                  <h3  class="ui orange header m-inline-block m-text-thin">${count }</h3>个 
                  
                </div>
            </div>
        </div>

        
            <div class="ui labeled button m-margin-tb-tiny" tabindex="0">
                <button  class="ui basic  button" id="ajaxaddto">航天人物的经历\荣誉</button>
                <div class="ui basic  left pointing label">${count }</div>
          
            
        </div>

        <!-- ajax刷新文章列表 -->
        <div class="ui top attached segment teal" id="ajaxRefresh">
           
				<!-- ajaxshow.jsp 的显示 -->
           
        </div>
        
        </div>

     </div>
                 <%-- <c:forEach items="${articles }" var="article">
                 
                    <div class="ui eleven wide column" >
                        <h3 class="ui header">${article.title }</h3>
                        <p class="m-text">${article.content }</p>
                        <div class="ui stackable grid">
                            <div class="eleven wide column">
                                <div class="ui mini horizontal link list">
                                    <div class="item">
                                        <img src="<%=path%>/images/8a3dcf85-bb1d-4e23-b649-b2cbb1234fdf.jpg" alt="" class="ui avatar image">
                                        <div class="content">
                                            <a href="#" class="header">${article.managerinfo.nickname }</a>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i>${article.pubTime }
                                    </div>
                                   
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    
			</c:forEach>  --%>
			
		<!--  	
	<div class="pager">
	<span>共${count }条记录</span>
	<c:forEach begin="1" end="${count/10+(count%10==0?0:1) }" var="i">
		<!-- <a onclick="getPageData(${i})">${i }</a> -->
		<!--  <a data-page="${i }">${i }</a>
	</c:forEach>
	</div>
	-->
	
		<!--  	
      <script type="text/javascript">
       
       var path = "${pageContext.request.contextPath}";
       $(function(){
        	//$("div.pager a").click()或者写onclick="getpage传递参数${i}"
        	$("div.pager a").click(function(){
        		//alert($(this).html());
        		getpageData($(this).data());//this当前的a标签的对象  去j快润对象的值 data 里面的值
        		//$("#result").load(path+"/ArticleController?action=ajaxlist&pageNum=1");//当前页数
        	});
        	$("#result").load(path+"/ArticleController?action=ajaxlist&pageNum=1");//当前页数
        	
        	$("#result").on("click",".butdel",function(){
        		var id = $(this).data("id");//给buttion id 或者 给tr 一个i
        		var that = this;
        		var url = path+"/ArticleController?action=delete&id="+id;
        		$(this).parent().parent().remove();//不用找打id找他的上一级删除
        	})
        	
          });
        
        
        function getpageData(pageNum)
        {
        	//alert(pageNum)
        	$("#result").load(path+"/ArticleController?action=ajaxlist&pageNum="+pageNum);//带着参数去访问
        }
        
        //删除
        function delhero()
        {
        	
        	
        	var url =path+"/BookController?action=;&id="+id;
        	$.get(url,function(){
        	$("#row"+id).remove();	
        	});
        	
        }
        
        </script>
      -->
      
      
      
       <script type="text/javascript">
       
  var path = "${pageContext.request.contextPath}";
	$(function(){
		$("#ajaxRefresh").on("click",".p",function(){
			getPageData($(this).data("page"));
		});
		$("#ajaxRefresh").load(path+"/ArticleController?action=ajaxlist&pageNum=1&subjectId=10");
		
		 $("#ajaxaddto").on("click",btn);//添加事件
	});
	
	
	
	 function btn(){
		$("#ajaxRefresh").load(path+"/ArticleController?action=ajaxlist&pageNum=1&subjectId=10");
	}
	 
	function getPageData(pageNum){
		$("#ajaxRefresh").load(path+"/ArticleController?action=ajaxlist&subjectId=10&pageNum="+pageNum);
	}
	
</script>



			
			
			
	
  			
  
  

			

<!--底部-->

<footer class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="" alt="" class="ui rounded image" style="width: 110px;">
                    </div>
                </div>

            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">航天英雄</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">1、长征七号运载火箭</a>
                    <a href="#" class="item">2、嫦娥五号登月</a>
                    
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">航天英雄</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">中国进行载人航天研究的历史可以追溯到20世纪70年代初</a>
                    <a href="#" class="item">1970年7月14日，“东方红一号”</a>
                    <a href="#" class="item"></a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">航天英雄</h4>
                <div class="ui inverted link list">
                    <p class="m-text-thin m-text-spaced m-opacity-mini">1986年3月3日，王淦昌、陈芳允、杨嘉墀、王大珩四位科学家联名向中央呈报了一份《关于跟踪世界战略性高技术发展》的建议。中央很快就批准了这个建议，这就是后来著名的“863计划”。航天技术是“863计划”七大领域中的第二领域。“863计划”对中国载人航天工程起到了催生的作用。</p>
                </div>
            </div>
        </div>

        <div class="ui inverted section divider">

        </div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny"></p>

    </div>



</footer>





</body>
</html>